@import '../variables';
@import '../starability-base';

@keyframes grow-rotate {

  0% {
    transform: scale(1,1) rotate(0);
  }

  99% {
    transform: scale(4,4) rotate(90deg);
    opacity: 0;
  }

  100% {
    transform: scale(1,1) rotate(0);
    opacity: 0;
  }
}

.starability-growRotate {
  @include starability-base;

  > label:before {
    @include starability-animation-base;
    bottom: 0;
  }

  > input:checked + label:before {
    display: block;
    animation-duration: 1s;
    animation-name: grow-rotate;
    animation-fill-mode: forwards;
  }
}